<%@ page language="java" import="java.util.*"
	contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>录入人员信息</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link type="text/css" href="jquery/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="jquery/jquery-ui-1.8.19.custom.min.js"></script>
<script type="text/javascript" src="script/commons.js"></script>
<script type="text/javascript" src="script/objects.js"></script>
<script type="text/javascript">
	var currentMode = '${mode}';
	var parentId = '${p}';
	pager.currentPage = "${page.currentPage}";
	pager.action = "customerallinfo.do";
	pager.getParam = function() {
		if (currentMode == "search") {
			return "&s=" + $("#searchKey").val();
		} else if (currentMode == "shop") {
			return "&p=" + parentId;
		}
		return "";
	}
	
	var updater = {
		oldValue : [],
		newValue : [],
		lastTr : null,
		lastA : null,
		lastButtons : null,
		endUpdateMode : function(values) {
			var jTr = this.lastTr;
			var tds = jTr.children("td");
			var td1 = tds[1];
			if(this.lastA != null) {
				td1.innerHTML = "";
				this.lastA.text(values[0]);
				$(td1).append(this.lastA);
			} else {
				$(td1).html(values[0]);
			}
			tds[2].innerHTML = values[1];
			tds[3].innerHTML = this.lastButtons;
			this.lastButtons = null;
			this.lastTr = null;
			this.lastA = null;
		},
		createInput : function(n, v, maxL, bColor, height) {
			return $("<input type='text' " +
				"style='width:100%; vertical-align:middle; text-align:center;' />")
				.attr("id", n)
				.attr("name", n)
				.attr("maxlength", maxL)
				.css("border", "1px solid " + bColor)
				.css("font-size", "16px")
				.val(v)[0];
		},
		doCancel : function() {
			updater.endUpdateMode(updater.oldValue);
		},
		doSave : function() {
			var v0 = $("#value0").val();
			var v1 = $("#value1").val();
			if (v0 == "") {
				$("#value0").css("border-color", "red");
				return;
			} else {
				$("#value0").css("border-color", "");
			}
			if (v1 == "") {
				$("#value1").css("border-color", "red");
				return;
			} else {
				$("#value1").css("border-color", "");
			}
			if (v0 == updater.oldValue[0] && v1 == updater.oldValue[1]) {
				updater.endUpdateMode(updater.newValue);
				return;
			}
			updater.newValue[0] = v0;
			updater.newValue[1] = v1;
			var id = updater.lastTr.children("td")[0].innerHTML;
			$.post("changeCustomer.do", { customerId : id, customer : v0, customerRemark : v1 }, 
				function(data) {
					var result = $(data).find("xml-body").text();
					result = trim(result);
					if (result != "success") {
						alert("保存失败！");
						updater.endUpdateMode(updater.oldValue);
						return;
					}
					updater.endUpdateMode(updater.newValue);
				},
				"xml"
			);
		},
		createButton : function(v, f) {
			var $button = $("<input type='button' class='common_button' />");
			$button.val(v);
			$button.click(f);
			return $button[0];
		},
		checkOld : function() {
			if (this.lastTr != null) {
				this.endUpdateMode(this.newValue);
			}
		},
		toUpdateMode : function() {
			this.checkOld();
			var $tr = $(event.srcElement).parents("tr");
			var trHeight = $tr.height();
			var trBgColor = $tr.css("background-color");
			var tds = $tr.children("td");
			/* ---- Start ---- */
			//td1
			var td1 = $(tds[1]);
			if(td1.children("a").length > 0) {
				this.lastA = td1.children("a");
			}
			this.newValue[0] = this.oldValue[0] = td1.text();
			td1.empty().append(this.createInput("value0", this.oldValue[0], 30, trBgColor, trHeight));
			// td2
			this.newValue[1] = this.oldValue[1] = tds[2].innerHTML;
			tds[2].innerHTML = "";
			tds[2].appendChild(this.createInput("value1", this.oldValue[1], 50, trBgColor, trHeight));
			/* ---- End ---- */
			// Save Buttons
			this.lastButtons = tds[3].innerHTML;
			tds[3].innerHTML = "";
			tds[3].appendChild(this.createButton("保存", this.doSave));
			tds[3].appendChild(this.createButton("取消", this.doCancel));
			this.lastTr = $tr;
		}
	}
	
	function disableCustomer(){
		var table = findParent(event.srcElement, "TABLE");
		var tr = findParent(event.srcElement, "TR");
		var customer = tr.childNodes[1].innerText;
		var id = tr.childNodes[0].innerText;
		var result = confirm("确认停用客户[" + customer + "]吗？如果该客户为渠道，则其下店铺也都将停用。");
		if (result) {
			$.post("changeCustomer.do", { customerId : id, disable : "disable" }, 
				function(data) {
					var result = $(data).find("xml-body").text();
					result = trim(result);
					if (result != "success") {
						alert("停用失败！");
					}else{
						with (tr) {
							childNodes[3].innerHTML = "";
							var bcolor = "#CCCCCC";
							var fcolor = "#EFEFEF";
							childNodes[0].style.color = fcolor;
							childNodes[1].style.color = fcolor;
							childNodes[2].style.color = fcolor;
							childNodes[3].style.color = fcolor;
							childNodes[0].style.backgroundColor = bcolor;
							childNodes[1].style.backgroundColor = bcolor;
							childNodes[2].style.backgroundColor = bcolor;
							childNodes[3].style.backgroundColor = bcolor;
						}
					}
				},
				"xml"
			);
		}
	}
	function search() {
		to("customerallinfo.do?s=" + $("#searchKey").val());
	}
	function toAdd() {
		parent.theMenu.itemClicked(14);
		to("forwardCustomeradd.do");
	}
	$(document).ready(function() {
		if(currentMode == "shop"){
			$(".customerTitle").text("店铺");
		}
		$("#searchKey").val('${s}');
	});
</script>
<style type="text/css">
#info {
	position: static;
	width: 200px;
	height: 115px;
	z-index: 1;
}

#searchTitle {
	position: relative;
	top: -1px;
	left: 45px;
	font-size: 13px;
}

#searchKey {
	padding-left: 45px;
	width: 150px;
}

.aButton {
	padding-right:5px;
}

.customerId { width:5% }
.customer { width:30% }
.customerRemark { width:45% }
.buttons { width: 20% }
	
</style>
</head>
<body>
	<form action="customerallinfo.do" method="post">
		<div class="button_bar">
			<button class="common_button" onclick="toAdd()">
				<img alt="新增" src="images/mainButton/addbutton.gif" width="12px;">新增
			</button>
			<label><span id="searchTitle"><span class="customerTitle">渠道</span>名:</span><input
				id="searchKey" name="searchKey" type="text" />
			</label>
			<button class="common_button" onclick="search()">
				<img alt="查询" src="images/mainButton/search1.gif" width="12px;">查询
			</button>
		</div>
		<table width="770" height="133" class="data_list_table">
			<tr>
				<th><span class="customerTitle">渠道</span>编号</th>
				<th><span class="customerTitle">渠道</span>名称</th>
				<th>备注信息</th>
				<th>执行操作</th>
			</tr>
			<c:if test="${list!=null}" var="sel">
			<c:forEach var="item" items="${list}" varStatus="i">
            <c:choose>
            	<c:when test="${i.index % 2 == 0}">
                <tr class="row1">
                </c:when>
                <c:otherwise>
                <tr class="row2">
                </c:otherwise>
            </c:choose>
                <td class="list_data_number customerId">${item.customerid}</td>
                <td class="list_data_text customer">
            <c:choose>
                <c:when test="${item.shopCount > 0}">
                	<a href="customerallinfo.do?p=${item.customerid}">${item.customer}</a>
               	</c:when>
                <c:otherwise>
                	${item.customer}
                </c:otherwise>
            </c:choose></td>
                <td class="list_data_text customerRemark">${item.customerremark}</td>
                <td class="list_data_text buttons">
                <c:if test='${item.parent.customerid == "000"}'>
                    <a href="forwardCustomeradd.do?p=${item.customerid}" class="aButton">添加店铺</a>
                </c:if>
                <a href="javascript:void()" class="aButton" onclick="updater.toUpdateMode()">
                <img src="images/bt_edit.gif" class="op_button" alt="修改" style="width: 20px; height: 20px;" />修改
                </a>
                <a href="javascript:void()" class="aButton" onclick="disableCustomer();">
                <img src="images/bt_del.gif" class="op_button" alt="停用该客户" style="width: 20px; height: 20px;" />停用
                </a>
                </td>
            </tr>
            <!--隐藏域 显示详细信息  -->
				</c:forEach>
			</c:if>
			<tr>
			</tr>

			<tr>
				<th colspan="9" class="pager">
						<a href="javascript:void()" onclick="pager.first()">
						<img alt="第一页" src="images/mainButton/pagefirst.gif" width="10px;" border="0px;">
						</a>
						<a href="javascript:void()" onclick="pager.previous()">
						<img alt="上一页" src="images/mainButton/pageprev.gif" width="60px;"
							border="0px;">
						</a>
						<a href="javascript:void()" onclick="pager.next()">
						<img alt="下一页" src="images/mainButton/pagenext.gif" width="60px;"
							border="0px;">
						</a>
						<a href="javascript:void()" onclick="pager.last()">
						<img alt="最后一页" src="images/mainButton/pageafter.gif" width="10px;"
							border="0px;">
						</a>
						共${page.totalRows}条记录 每页 ${page.pageSize} 条 第 ${page.currentPage}
						页/共${page.totalPages}页
						&nbsp;&nbsp;&nbsp;&nbsp;
				</th>
			</tr>
		</table>
	</form>
</body>
</html>